<template>
  <div class="detail-sku" v-if="haveSku">
    <tag tag="规格" />
    <ul class="list">
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  name: 'DetailProperty',
  props: ['detail'],
  components: { Tag },
  computed: {
    list() {
      return this.detail.skuName.map(x => x.name)
    },
    haveSku() {
      return this.detail.sku && this.detail.sku.length > 0 && this.detail.skuName && this.detail.skuName.length > 0
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-sku
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  .list
    padding 10px 0
    .list-item
      height 25px
      line-height 25px
      display inline-block
      background #ccc
      margin-right 10px
      padding 0 10px
      border-radius 5px
</style>
